import * as React from 'react';
import moment from "moment";
import Line from 'echarts-for-react';
import {originalList} from './mock';
import styles from './common.less';
import './common.less'


const typeJson1: any = {
  "exportVoltage": "输出电压",
  "exportElectricity": "输出电流",
  "demandVoltage": "需求电压",
  "demandElectricity": "需求电流",
  "soc": "soc"

}
const typeJson2: any = {
  "anodeTemperature": "正极温度",
  "cathodeTemperature": "负极温度",
  "maxTemperature": "电池最高温度",
  "minTemperature": "电池最低温度",
  "soc": "soc"

}
const colors = [
  "rgba(254, 219, 101,0.7)",
  "rgba(0, 122, 254,0.8)",
  "rgba(255, 75, 122, 0.9)",
  '#80FFA5',
  '#00DDFF',
  '#37A2FF',
  // '#FF0087',
  '#FFBF00',
  "rgba(0, 122, 254,0.6)",
  "rgba(0, 122, 254,0.5)",
  "rgba(254, 219, 101,0.5)",
]
const ProcessLine = (props: any) => {
  const {lineData = [], data = [], title, selectKeys = [], isAll = false, isOne = false} = props;
  const xData =lineData && lineData.length ? lineData.map((i) => moment(i?.createTime).format('HH:mm')) : [];
  const temArrOne = [];
  const temArrTwo = [];
  // 取最大电压值
  const xuqiudianya = Math.max.apply(Math, lineData.map((m) => m.demandVoltage));
  const shuchudianya = Math.max.apply(Math, lineData.map((m) => m.exportVoltage));
  const maxdianya = Math.max(xuqiudianya, shuchudianya);
  const xuqiudianliu = Math.max.apply(Math, lineData.map((m) => m.demandElectricity));
  const shuchudianliu = Math.max.apply(Math, lineData.map((m) => m.exportElectricity));
  const maxdianliu = Math.max(xuqiudianliu, shuchudianliu);
  const rate2 = maxdianliu > 100 ? maxdianliu / 100 : 1;
  // eslint-disable-next-line guard-for-in
  for (const l in typeJson1){
    const valueArrOne = lineData &&lineData.length ? lineData.map((i) => l === 'soc' ? i[l]*rate2 : i[l]) : [];
    if (l === 'soc'){
      temArrOne.push({
        label: typeJson1[l] ? typeJson1[l] : '',
        value: [...valueArrOne]
      })
    } else {
      temArrOne.push({
        label: typeJson1[l] ? typeJson1[l] : '',
        value: [...valueArrOne]
      })
    }
  }
  // eslint-disable-next-line guard-for-in
  for (const l in typeJson2){
    const valueArrTwo = lineData &&lineData.length ? lineData.map((i) => l === 'soc' ? i[l]*1 : i[l]) : [];
    if (l === 'soc'){
      temArrTwo.push({
        label: typeJson2[l] ? typeJson2[l] : '',
        value: [...valueArrTwo]
      })
    } else {
      temArrTwo.push({
        label: typeJson2[l] ? typeJson2[l] : '',
        value: [...valueArrTwo]
      })
    }
  }
  const temData = [];
  if (data.length) {
    for (const d of data) {
      for (const i of originalList) {
        if (d.code === i.initCode) {
          temData.push({
            ...d,
            name: i.name
          })
        }
      }
    }
  }
  const Xdata = [];
  const Sdata = [];
  const Tdata = [];
  const finalData = selectKeys.length || !isAll ? data : temData;
  if (finalData.length) {
    for (const d of finalData) {
      Xdata.push(d.name);
      Sdata.push(d.ratio ? d.ratio.toFixed(2) : 0);
      Tdata.push(d.median ? d.median.toFixed(2) : 0);
    }
  }
  const axisLabel: any = {
    // interval: isAll && !selectKeys.length && 0,
    textStyle: {
      color: '#83C0FF',
    },
    rotate: isAll && !selectKeys.length ? -30 : 0, // 度角倾斜显示
    formatter(value: any) {
      let ret = ""; // 拼接加\n返回的类目项
      const maxLength = 3;// 每项显示文字个数
      const valLength = value.length; // X轴类目项的文字个数
      const rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
      if (isAll && !selectKeys.length){
        return value
      }
      if (rowN > 1) // 如果类目项的文字大于3,
      {
        for (let i = 0; i < rowN; i += 1) {
          let temp = ""; // 每次截取的字符串
          const start = i * maxLength; // 开始截取的位置
          const end = start + maxLength; // 结束截取的位置
          // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
          temp = `${value.substring(start, end)}\n`;
          ret += temp; // 凭借最终的字符串
        }
        return ret;
      }

      return value;

    }
  };
  if (isAll && !selectKeys.length) axisLabel.interval = 0;
  const legendData = isOne ? [ '需求电压', '需求电流', '输出电压', '输出电流', 'soc'] : [ '电池最高温度', '电池最低温度', '正极温度', '负极温度', 'soc'];
  const lastData = isOne ? temArrOne : temArrTwo;
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none"
      },
      borderWidth: 0,
      padding: 0,
      backgroundColor: "transparent",
      formatter: (params) => {
        let str = "";
        params.forEach((val) => {
          str += `
          <div class="year-item">
            <span class="year-dot" style="background-color: ${val.color};"></span>
            <span class="year-name">${val.seriesName}</span>
            <span class="year-value">${val.seriesName === 'soc' ? (val.data / rate2).toFixed(0) : val.data}</span>
          </div>
          `;
        });
        const dom = `
                    <div class="annual-tooltip">
                    <span class="annual-month">${params[0]?.axisValue}</span>
                      <div class="annual-list">
                        ${str}
                      </div>
                    </div>
                  `;
        return dom;
      }
    },
    legend: {
      // data: [ '电池最高温度', '需求电压', '需求电流', '输出电压', '输出电流', 'soc'],
      data: legendData,
      selected: {
        // '正极温度': false,
        // '负极温度': false,
        '电池最高温度': false,
        '电池最低温度': false,
        '需求电压': false,
        '需求电流': false,
        'soc': false,
      }
    },
    grid: {
      top: "20%",
      left: "50",
      right: "5%",
      bottom: "10%"
    },
    xAxis: [
      {
        // name: "(月份)",
        type: "category",
        boundaryGap: false,
        axisLine: {
          show: false,
          lineStyle: {
            color: "#233653"
          }
        },
        axisLabel: {
          // color: "#7ec7ff",
          padding: 0,
          fontSize: 12,
          formatter: function (data) {
            return data;
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#192a44"
          }
        },
        axisTick: {
          show: false
        },
        data: xData
      }
    ],
    yAxis: {
      // name: "(万元)",
      nameTextStyle: {
        // color: "#D6DFEA",
        fontSize: 12,
        padding: [0, 30, 0, 0]
      },
      minInterval: 1,
      splitNumber: 5,
      splitLine: {
        show: false,
        lineStyle: {
          color: "#192a44"
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#233653"
        }
      },
      axisLabel: {
        show: true,
        // color: "#B9D6D6",
        padding: 0
      },
      axisTick: {
        show: false
      }
    },
    series: lastData.map((val, index) => {
      return {
        name: val.label || '',
        type: "line",
        symbol: "circle",
        showSymbol: false,
        smooth: true,
        lineStyle: {
          width: 1,
          color: colors[index],
          borderColor: colors[index]
        },
        itemStyle: {
          color: colors[index],
          borderColor: "#646ace",
          borderWidth: 2
        },
        tooltip: {
          show: true
        },
        // areaStyle: {
        //   color: {
        //     type: "linear",
        //     x: 0,
        //     y: 0,
        //     x2: 0,
        //     y2: 1,
        //     colorStops: [
        //       {
        //         offset: 0,
        //         color: this.data.colors[index]
        //       },
        //       {
        //         offset: 1,
        //         color: gradientColors[index]
        //       }
        //     ],
        //     global: false
        //   },
        //   shadowColor: "rgba(25,163,223, 0.3)",
        //   shadowBlur: 20
        // },
        data: val.value
      };
    })
  };
  return (
    <div className={styles.reportDetailDiv}>
      <div className={styles.headerTitle}>
        <div className={styles.title}>{title}</div>
      </div>
      <div className={styles.tableContent}>
        <Line option={option}/>
      </div>
    </div>
  );
};

export default ProcessLine;
